import { computed, defineComponent, ref } from 'vue';
import Basic from './Basic.vue';
import Coloring from './Coloring.vue';
import CustomTransition from './CustomTransition.vue';
import Offset from './Offset.vue';
import OneSecond from './OneSecond.vue';
import Target from './Target.vue';
import VModel from './VModel.vue';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    return () => {
      return (
        <div class='block'>
          <div class='block-'>
            <h5 class='title'>Basic</h5>
            <Basic />
          </div>
          <div class='block-'>
            <h5 class='title'>Coloring</h5>
            <Coloring />
          </div>
          <div class='block-'>
            <h5 class='title'>CustomTransition</h5>
            <CustomTransition />
          </div>
          <div class='block-'>
            <h5 class='title'>Offset</h5>
            <Offset />
          </div>
          <div class='block-'>
            <h5 class='title'>OneSecond</h5>
            <OneSecond />
          </div>
          <div class='block-'>
            <h5 class='title'>Target</h5>
            <Target />
          </div>
          <div class='block-'>
            <h5 class='title'>VModel</h5>
            <VModel />
          </div>
        </div>
      );
    };
  },
});
